<template>
  <div class="setwrap">
    <div class="titlecommon">农事计划</div>
    <div class="panelben">
      <div class="titlecommon2">
        <span>
          农事计划模板
        </span>
        <div class="btntwo mt-3">
          <div class="btn mr-2">
            <span class="text" @click="addTemplate"> 新增模板 </span>
          </div>
          <div v-if="showInfo" class="btn btn-success mr-2">
            <span class="text" @click="editTemplate"> 编辑模板 </span>
          </div>
          <div class="btn btn-delete mr-2">
            <span class="text"> 删除模板 </span>
          </div>
        </div>
      </div>
      <el-divider />
      <div class="d-flex">
        <div class="leftContent mr-4">
          <div class="search mb-2">
            <el-input v-model="searchData.keyword" :prefix-icon="Search" placeholder="按作物品种关键字筛选" />
          </div>
          <div class="tree">
            <el-tree :data="treeData" :props="defaultProps" node-key="id" :default-expanded-keys="[1, 1.1]"
              @node-click="handleNodeClick" />
          </div>
        </div>
        <div v-if="showInfo" class="rightContent flex-1">
          <div class="mb-4">
            <div class="cardHeader mb-3">
              <div class="d-flex ai-center mb-1">
                <img :src="titleIcon" alt="">
                <div class="cardTitle">
                  <p class="font-lan-ml">农事计划基本信息</p>
                </div>
              </div>
              <div class="d-flex ai-center">
                <div class="line1"></div>
                <div class="line2"></div>
              </div>
            </div>
            <div>
              <el-form label-position="right" label-width="100px" :model="data.baseInfo" style="max-width: 600px">
                <el-form-item label="模板名称：">
                  <span>{{ data.baseInfo.name }}</span>
                </el-form-item>
                <el-row :gutter="16">
                  <el-col :span="12">
                    <el-form-item label="作物类型：">
                      <span>{{ data.baseInfo.type }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="作物品种：">
                      <span>{{ data.baseInfo.crop }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :span="12">
                    <el-form-item label="目标产量：">
                      <span>{{ data.baseInfo.yield }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="土壤质地：">
                      <span>{{ data.baseInfo.soilTexture }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :span="12">
                    <el-form-item label="种植密度：">
                      <span>{{ data.baseInfo.density }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="灌溉方式：">
                      <span>{{ data.baseInfo.irrigate }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :span="12">
                    <el-form-item label="创建人：">
                      <span>{{ data.baseInfo.person }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="修改日期：">
                      <span>{{ data.baseInfo.date }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
          <div>
            <div class="cardHeader mb-3">
              <div class="d-flex ai-center mb-1">
                <img :src="titleIcon" alt="">
                <div class="cardTitle">
                  <p class="font-lan-ml">农事阶段农事计划</p>
                </div>
              </div>
              <div class="d-flex ai-center">
                <div class="line1"></div>
                <div class="line2"></div>
              </div>
            </div>
            <div>
              <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities" :key="index" type="primary" size="large">
                  <div class="mb-2">
                    {{ activity.content }}
                  </div>
                  <div>
                    <div class="mb-2" v-for="(item1, index1) in data.planInfo[index]" :key="index1">
                      <div>
                        {{ item1.type }} ({{ moment(item1.startDate).format('YYYY-MM-DD') }}-{{ moment(item1.endDate).format('YYYY-MM-DD') }})
                      </div>
                      <div v-for="(item2, index2) in item1.list" :key="index2">
                        <span class="mr-3">农资类型：{{ item2.type }}</span>
                        <span class="mr-3">农资用量：{{ item2.value }}</span>
                      </div>
                      <div>
                        计划描述：{{ item1.remark }}
                      </div>
                    </div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { MoreFilled } from '@element-plus/icons-vue'
import moment from 'moment'
import router from '@/router';
import clone from "@/utils/common";
const handleNodeClick = (e) => {
  if (e.baseInfo && e.planInfo) {
    data.baseInfo = e.baseInfo
    data.planInfo = e.planInfo
    showInfo.value = true
  } else {
    showInfo.value = false
  }
}

const treeData = [
  {
    id: 1,
    label: '全部',
    children: [
      {
        id: 1.1,
        label: '玉米',
        children: [
          {
            label: '玉米种植',
            "baseInfo": {
              "name": "测试模板",
              "type": "玉米",
              "crop": "品种1",
              "yield": "1",
              "soilTexture": "沙土",
              "density": "1",
              "irrigate": "轮灌"
            },
            "planInfo": [
              [
                {
                  "list": [
                    {
                      "type": "农资1",
                      "value": "1"
                    }
                  ],
                  "type": "耕地",
                  "startDate": "2023-08-14T16:00:00.000Z",
                  "endDate": "2023-08-16T16:00:00.000Z",
                  "remark": "1"
                }
              ],
              [
                {
                  "list": [
                    {
                      "type": "农资2",
                      "value": "2"
                    }
                  ],
                  "type": "播种",
                  "startDate": "2023-08-16T16:00:00.000Z",
                  "endDate": "2023-08-17T16:00:00.000Z",
                  "remark": "2"
                }
              ],
              [
                {
                  "list": [
                    {
                      "type": "农资3",
                      "value": "3"
                    }
                  ],
                  "type": "施肥",
                  "startDate": "2023-08-17T16:00:00.000Z",
                  "endDate": "2023-08-18T16:00:00.000Z",
                  "remark": "3"
                },
                {
                  "list": [
                    {
                      "type": "农资4",
                      "value": "4"
                    }
                  ],
                  "type": "植保",
                  "startDate": "2023-08-16T16:00:00.000Z",
                  "endDate": "2023-08-24T16:00:00.000Z",
                  "remark": "3"
                }
              ],
              [
                {
                  "list": [
                    {
                      "type": "农资4",
                      "value": "4"
                    }
                  ],
                  "type": "灌溉",
                  "startDate": "2023-08-15T16:00:00.000Z",
                  "endDate": "2023-08-16T16:00:00.000Z",
                  "remark": "4"
                }
              ]
            ]
          }
          ,
          {
            label: '玉米品种2',
          },
          {
            label: '玉米品种3',
          },
        ],
      },
      {
        id: 1.1,
        label: '西瓜',
        children: [
          {
            label: '西瓜麒麟',
            baseInfo: {
              name: '西瓜麒麟',
              type: '西瓜',
              crop: '麒麟瓜',
              yield: '1000kg/亩',
              soilTexture: '沙地',
              density: '100亩/株',
              irrigate: '普灌',
              person: '创建人',
              date: '2023-08-12',
            },
            planInfo: [
              [
                {
                  type: '耕地',
                  startTime: '04-20',
                  endTime: '04-25',
                  list: [{ type: '农资1', value: '1', remark: '农资用量相关信息' }]
                }
              ],
              [
                {
                  type: '播种',
                  startTime: '04-25',
                  endTime: '04-30',
                  list: [{ type: '农资2', value: '2', remark: '农资用量相关信息' }]
                }
              ],
              [
                {
                  type: '灌溉',
                  startTime: '05-10',
                  endTime: '05-15',
                  list: [{ type: '农资5', value: '5', remark: '农资用量相关信息' }]
                },
              ],
              [
                {
                  type: '农收',
                  startTime: '05-15',
                  endTime: '05-20',
                  list: [{ type: '农资6', value: '6', remark: '农资用量相关信息' }]
                }
              ],
            ]
          },
          {
            label: '西瓜品种2',
          },
          {
            label: '西瓜品种3',
          },
        ],
      },
      {
        id: 1.1,
        label: '向日葵',
        children: [],
      },
      {
        id: 1.1,
        label: '辣椒',
        children: [],
      },
      {
        id: 1.1,
        label: '小麦',
        children: [],
      }, {
        id: 1.1,
        label: '苹果',
        children: [],
      }, {
        id: 1.1,
        label: '大米',
        children: [],
      }
    ],
  },
]

const activities = [
  {
    content: '耕地',
  },
  {
    content: '种植',
  },
  {
    content: '管理',
  },
  {
    content: '收获',
  },
]

const searchData = reactive({
  keyword: ''
})

const data: any = reactive({
  baseInfo: {},
  planInfo: []
})

const showInfo = ref(false)

const titleIcon = require("@/assets/img/titleIcon.png")

const defaultProps = {
  children: 'children',
  label: 'label',
}

const addTemplate = () => {
  router.push({ name: 'plan_addTemplate' })
}

const editTemplate = () => {
  let obj = {
    baseInfo:clone(data.baseInfo),
    planInfo:clone(data.planInfo),
  }
  router.push({ name: 'plan_addTemplate', state: { params: obj } })
}

</script>

<style lang="scss">
.setwrap {

  .el-table th.el-table__cell,
  .el-table .el-table__cell,
  .el-table tr,
  .el-table--fit {
    background: transparent !important;
    color: #fff !important;
  }

  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .el-pagination.is-background .el-pager li {
    background: transparent !important;
    color: #fff !important;
  }

  .el-pagination.is-background .btn-next {
    background: none !important;
  }

  .btn-prev {
    background: none !important;
  }

  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.08) !important;
    width: 200px;
    border-radius: 200px;
    border: none !important;
    box-shadow: none;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.setwrap {
  .btn3 {
    width: 100px !important;
    margin-left: 10px;
  }

  .btn7 {
    width: 77px !important;
  }

  .cost {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    font-size: 20px;

    span {
      font-weight: bold;
      font-size: 25px;
      margin-left: 10px;
    }
  }

  .fy {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .total {
      color: rgba(255, 255, 255, 0.6);
      font-size: 10px;

      span {
        font-size: 20px;
      }
    }
  }

  .table {
    margin-top: 20px;
  }

  .btnwrap {
    display: flex;
    align-items: center;

    .btntext {
      color: rgba(49, 127, 245, 1);
      cursor: pointer;
    }

    .delete {
      color: rgba(245, 98, 98, 1) !important;
    }
  }

  .titlecommon2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .btn2 {
    width: 70px;
    box-sizing: border-box;
    padding: 5px 10px !important;
    margin-top: 20px;
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(9, 127, 229, 1);
    font-size: 14px;
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
  }

  .btn-success {
    background: #67C23A;
  }

  .btn-delete {
    background: #F56C6C;
  }

  .success {
    color: #67C23A
  }

  .leftContent {
    min-width: 300px;
  }

  .cardHeader {
    .cardTitle {
      width: 100%;
      height: 32px;
      padding: 4px 8px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
    }

    .line1 {
      width: 24px;
      height: 4px;
      background: #0856CC;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
    }

    .line2 {
      width: 100%;
      height: 2px;
      background: linear-gradient(243deg, rgba(8, 204, 204, 0) 0%, #0856CC 100%);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
    }
  }
}
</style>
